<template>
	<view class="mask">
		<u-popup v-model="regBool" mode="center" :mask-close-able="false">
			<view class="mwrap">
				<image class="ruleBgp" mode="widthFix" :src="imgPath+'/static/big/rules.png'"></image>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="ruleBox">
					<image class="rule" mode="widthFix" :src="imgPath+'/static/big/teamRules.png'"></image>
				</scroll-view>
				<image class="wait" :class="{disable: !!seconds}" v-if="isShow" @click="wait" mode="widthFix" :src="imgPath+'/static/big/zudui.png'"></image>
				<view class="seconds" v-if="seconds && isShow">{{seconds}}S</view>
				<image class="confirm" :class="{disable: !!seconds}" v-if="isShow" @click="confirm" mode="widthFix" :src="imgPath+'/static/big/xunzhao.png'"></image>
				<view class="seconds1" v-if="seconds && isShow">{{seconds}}S</view>
				<image class="close" @click="close" mode="widthFix" :src="imgPath+'/static/close.png'"></image>
			</view>
		</u-popup>
	</view>
</template>
<script>

	export default {
		name:"Rules",
		data() {
			return {
				regBool:false,
				seconds: 10,
				timer: '',
			};
		},
		props: {
			 isShow: {
				type: Boolean,
				default: true
			},
		},
		methods:{
			show(){
				this.seconds = 10
				this.timer = setInterval(() => {
					this.seconds = this.seconds - 1
					if(this.seconds <= 0){
						this.seconds = 0
						clearInterval(this.timer)
					}
				}, 1000);
				this.regBool = true;
			},
			confirm(){
				this.regBool = false;
				this.$emit('findTeam');
			},
			wait(){
				this.regBool = false;
				this.$emit('team');
			},
			close(){
				this.regBool = false;
			}
		}
	}
</script>

<style lang="scss" scoped>

.mwrap{
	width: 750rpx;
	height: 1050rpx;
	display: flex;
	justify-content: center;
	position: relative;
	.ruleBgp{
		position: absolute;
		width: 610rpx;
		height: 930rpx;
	}
	.ruleBox{
		position: absolute;
    width: 590rpx;
    height: 720rpx;
    left: 46rpx;
    top: 140rpx;
    overflow: auto;
		.rule{
			width: 570rpx;
		}
	}
	.wait{
		position: absolute;
		width: 290rpx;
    left: 66rpx;
		bottom: 100rpx;
	}
	.seconds{
		position: absolute;
    width: 275rpx;
    height: 74rpx;
    text-align: right;
    line-height: 66rpx;
    font-size: 38rpx;
    font-weight: bold;
    left: 66rpx;
    bottom: 100rpx;
	}
	.seconds1{
		position: absolute;
    width: 278rpx;
    height: 74rpx;
    text-align: right;
    line-height: 66rpx;
    font-size: 38rpx;
    font-weight: bold;
    left: 366rpx;
    bottom: 100rpx;
	}
	.confirm{
		position: absolute;
		width: 290rpx;
    right: 88rpx;
		bottom: 100rpx;
	}
	.disable{
		filter: grayscale(1);
 		pointer-events: none;
	}
	.close{
		position: absolute;
		width: 100rpx;
		left: 308rpx;
		bottom: 0;
	}
}

</style>